<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { getCaptchaImage } from '@/api/interface/web/user'

const fullscreenLoading = ref(false)

const formRef = ref()

const form = reactive({
  email: '',
  username: '',
  code: '',
  captchaSessionId: '',
  password: '',
  repassword: '',
})

const rules = reactive({
  // email: [
  //   {
  //     required: true,
  //     message: '请输入账号',
  //     trigger: 'blur',
  //   },
  // ],
  username: [
    {
      required: true,
      message: '请输入账号',
      trigger: 'blur',
    },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value.length < 3 || value.length > 15) {
          callback(new Error('账号长度为3-15字符!'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: 'blur',
    },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value.length < 3 || value.length > 15) {
          callback(new Error('密码长度为3-15字符!'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
  repassword: [
    {
      required: true,
      message: '请输入确认密码',
      trigger: 'blur',
    },
    {
      validator: (rule: any, value: any, callback: any) => {
        if (value.length < 3 || value.length > 15) {
          callback(new Error('密码长度为3-15字符!'))
        } else {
          callback()
        }
      },
      trigger: 'blur',
    },
  ],
})

const submitForm = () => {
  return new Promise<any>((resolve: any) => {
    formRef.value.validate((valid: any) => {
      let res: any = null

      if (valid) {
        if (form.password !== form.repassword) {
          ElMessage({
            message: '两次输入的密码不一致',
            type: 'error',
            grouping: true,
          })
          return
        }
        res = form
      }
      resolve(res)
    })
  })
}

// 获取验证码
const captchaImage: any = ref('')
const getCode = async () => {
  fullscreenLoading.value = true
  const res: any = await getCaptchaImage({})
  captchaImage.value = res.img
  form.captchaSessionId = res.sessionId
  fullscreenLoading.value = false
}

defineExpose({
  submitForm,
  getCode,
})

onMounted(() => {
  getCode()
})
</script>

<template>
  <div class="register-form-wrapper" v-loading.fullscreen="fullscreenLoading">
    <el-form ref="formRef" :model="form" :rules="rules">
      <div class="form-input-container">
        <div class="label">邮箱 (用于找回密码 非必填)</div>
        <div class="input-container">
          <el-form-item prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱" />
          </el-form-item>
        </div>
      </div>
      <div class="form-input-container">
        <div class="label">账号</div>
        <div class="input-container">
          <el-form-item prop="username">
            <el-input v-model="form.username" placeholder="请输入账号" />
          </el-form-item>
        </div>
      </div>
      <div class="form-input-container">
        <div class="label">密码</div>
        <div class="input-container">
          <el-form-item prop="password">
            <el-input v-model="form.password" placeholder="请输入密码" show-password />
          </el-form-item>
        </div>
      </div>
      <div class="form-input-container">
        <div class="label">确认密码</div>
        <div class="input-container">
          <el-form-item prop="repassword">
            <el-input v-model="form.repassword" placeholder="请确认密码" show-password />
          </el-form-item>
        </div>
      </div>
      <div class="form-input-container code-container">
        <div class="label">验证码</div>
        <div class="input-container">
          <el-form-item prop="code">
            <el-input v-model="form.code" placeholder="请输入验证码" />
          </el-form-item>
          <div class="code-img-container" @click="getCode">
            <img :src="captchaImage" alt="" style="margin-top: 0px; width: 100px; height: 32px" />
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.register-form-wrapper {
  @include rect(100%, auto);
  @include flex(column, center, center);

  .el-form {
    width: 100%;
  }

  .logo-container {
    @include flex(row, flex-start, center);
    margin-bottom: 76px;
    .logo {
      @include rect(76px, 76px);
      @include background-image('../imgs/logo.png', 100%, 100%);
    }
    .title {
      font-family: 'PingFangSC-Bold';
      font-weight: 600;
      font-size: 36px;
      color: var(--el-color-primary-light-8);
      margin-left: 24px;
      pointer-events: none;
    }
  }
  .form-input-container {
    @include flex(column, flex-start, flex-start);
    .label {
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 14px;
      pointer-events: none;
    }
    .input-container {
      width: 100%;
      --el-component-size: 45px;
      --el-border-radius-base: 8px;
      :deep(.el-input__wrapper) {
        padding-left: 15px;
        padding-right: 20px;
      }
      :deep(.el-form-item__error) {
        padding-left: 0px;
        padding-top: 10px;
        font-size: 14px;
      }
    }
    .label + .input-container {
      margin-top: 10px;
    }
  }

  .code-container {
    .input-container {
      position: relative;
      .code-img-container {
        width: 120px;
        position: absolute;
        top: 7px;
        right: -12px;
        cursor: pointer;
      }
    }
  }

  .form-input-container + .form-input-container {
    margin-top: 10px;
  }
  .code-container {
    position: relative;
    .short-message-container {
      position: absolute;
      top: 17px;
      right: 31px;
    }
  }
  .submit-container {
    --el-border-radius-round: 30px;
    margin-top: 22px;
    margin-bottom: 36px;
    .el-button {
      height: 60px;
      width: 418px;
    }
    .submit-text {
      font-family: 'PingFangSC-Medium';
      font-weight: 500;
      font-size: 18px;
      color: rgba(255, 255, 255, 1);
    }
  }
  .operation-container {
    @include flex(row, center, center);
    pointer-events: none;
    .login-container {
      font-family: 'PingFangSC-Regular';
      font-weight: 400;
      font-size: 16px;
      color: rgba(144, 147, 154, 1);
      span {
        text-decoration: underline;
        cursor: pointer;
        pointer-events: auto;
        color: var(--theme-color);
      }
    }
    .register-container + .forget-container {
      margin-left: 140px;
    }
  }
}
</style>
